<template>
	<view class="animated fadeIn fast">
		
		<view class="mylist">创建的歌单 ({{createList.length}})</view>
		
		<view  class="gedan-list" v-for="(item,index) in createList "
		:key="index">
		
			 <view class="item u-f-ac" @tap="navigateTo1(index)">
				 <view class="image">
					 <image lazy-load mode="widthFix" :src="item.coverImgUrl"></image>
				 </view>
				 <view class="info">
					 <view class="name">{{item.name}}</view>
					 <view class="num">{{item.trackCount}}首 播放{{item.playCount}}</view>
				 </view>
			 </view>				  
		</view>
		
		<view class="mylist">收藏歌单 ({{collectList.length}})</view>
		
		<view  class="gedan-list" v-for="(item,index) in collectList "
		:key="index">
		
			 <view class="item u-f-ac" @tap="navigateTo2(index)">
				 <view class="image">
					 <image lazy-load mode="widthFix" :src="item.coverImgUrl"></image>
				 </view>
				 <view class="info">
					 <view class="name">{{item.name}}</view>
					 <view class="num">{{item.trackCount}}首 播放{{item.playCount}}</view>
				 </view>
			 </view>				  
		</view>
		
		
	</view>
</template>

<script>
	export default {
		props:{
			createList:Array,
			collectList:Array,
			navtoUrl:String
		},
		data() {
			return {
				
			}
		},
		methods: {
			navigateTo1(index){
				//点击索引
				uni.navigateTo({
					url:this.navtoUrl+'?id='+this.createList[index].id
				})
			},
			navigateTo2(index){
				//点击索引
				uni.navigateTo({
					url:this.navtoUrl+'?id='+this.collectList[index].id
				})
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.mylist{
		padding: 10upx;
		background: #C0C0C0;
	}
	.gedan-list{
		.item{
			padding: 10upx 10upx 0 10upx;
			border-bottom: 1upx solid #C0C0C0;
			.image{
				flex: 2;
				image{
					width: 100%;
				}
			}
			.info{
				padding-left: 15upx;
				flex: 14;
				.num{
					font-size: 25upx;
					color: #CCCCCC;
				}
			}
		}
	}
	
</style>
